<template>
  <div class="container">
    <div class="top-bg">
      <div class="top-block">
        <img class="logo-image animate__fadeIn" src="@/assets/images/login/logo.png" alt="Logo" />
        <div class="slogan animate__fadeInDown">智控全场，互动有响</div>
        <div class="grid-block">
          <div class="grid-title">直播效果提升300%，从开播到变现全加速</div>
          <div class="grid">
            <div class="grid-item animate__fadeInUp animate__delay-1">
              <div class="icon">
                <img src="@/assets/images/index/icon1.png" alt="无人直播">
              </div>
              <div class="slon1">无人直播</div>
              <div class="slon2">持续创造价值</div>
            </div>
            <div class="grid-item animate__fadeInUp animate__delay-2">
              <div class="icon">
                <img src="@/assets/images/index/icon2.png" alt="声音克隆">
              </div>
              <div class="slon1">声音克隆</div>
              <div class="slon2">一键克隆理想声音</div>
            </div>
            <div class="grid-item animate__fadeInUp animate__delay-3">
              <div class="icon">
                <img src="@/assets/images/index/icon3.png" alt="实时互动">
              </div>
              <div class="slon1">实时互动</div>
              <div class="slon2">对话自然流畅</div>
            </div>
            <div class="grid-item animate__fadeInUp animate__delay-4">
              <div class="icon">
                <img src="@/assets/images/index/icon4.png" alt="话术重写">
              </div>
              <div class="slon1">话术重写</div>
              <div class="slon2">告别内容重复</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <div class="platform animate__fadeInUp">
      <div class="platform-title">一键选平台，开启你的专属直播</div>
      <div class="platform-items" @click="deploy(1)">
        <img src="@/assets/images/index/douyin.png" alt="抖音">
      </div>
      <!-- <div class="platform-items" @click="deploy(3)">
        <img src="@/assets/images/index/kuaishou.png" alt="快手">
      </div> -->
      <div class="platform-items" @click="deploy(2)">
        <img src="@/assets/images/index/shipinhao.png" alt="视频号">
      </div>
    </div>
    <!-- 页面内容区域底部留白，防止被tabbar遮挡 -->
    <div class="tabbar-placeholder"></div>
    
    <!-- 全局弹窗组件 -->
    <GlobalDialog
      v-model="showDialog"
      type="sl"
      title="算力余额不足"
      :message="`您当前的算力余额为${store.computeBalance}，请先充值后再使用`"
      cancelText="知道了"
      confirmText="去充值"
      :show-cancel="true"
      @confirm="handleDialogConfirm"
      @cancel="handleDialogCancel"
    >
    </GlobalDialog>
    <SuanliDialog
      v-model="showSuanliDialog"
      :message="`您当前的算力余额为${store.computeBalance}，请先充值后再使用`"
      :show-cancel="true"
      @confirm="handleDialogConfirm"
      @cancel="handleDialogCancel"
    >
    </SuanliDialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router'
import { useStore } from '@/stores/data'
import GlobalDialog from '@/components/GlobalDialog.vue';
import SuanliDialog from '@/components/SuanliDialog.vue';
const router = useRouter()

const roomid = ref('')
const store = useStore()



// 状态变量
const ishide = ref(false);
const isTsShow = ref(false);
const qrCode = ref('@/assets/images/qrcode.png');
const uhostBalance = ref(0);
const isPageLoaded = ref(false);
const showDialog = ref(false); // 控制算力提示弹窗显示
const showSuanliDialog = ref(false); // 控制算力充值弹窗显示


// 方法
const close = (e) => {
  ishide.value = e;
};

const recharge = () => {
  isTsShow.value = false;
  ishide.value = true;
};


const deploy = (type) => {
  store.platform = type
  // 添加点击动画效果
  const platformItems = document.querySelectorAll('.platform-items');
  if(store.computeBalance <= 5) {
    showDialog.value = true
    return
  }
  const index = type === 1 ? 0 : type === 3 ? 1 : 2;
  if (platformItems[index]) {
    platformItems[index].classList.add('clicked');
    setTimeout(() => {
      platformItems[index].classList.remove('clicked');
      if (type === 2) {
        ishide.value = true;
      }
    }, 300);
  } else {
    if (type === 2) {
      ishide.value = true;
    }
  }
  router.push('/config')
};

// 算力弹窗处理方法
const handleDialogConfirm = () => {
  showDialog.value = false;
  showSuanliDialog.value = true;
};
const handleDialogCancel = () => {
  showDialog.value = false;
};

// 页面加载完成后执行动画
onMounted(async () => {
  isPageLoaded.value = true;
  // if(chat.wsStatus != 'open') chat.connect()
  // 为图标添加悬停动画
  const gridItems = document.querySelectorAll('.grid-item');
  gridItems.forEach(item => {
    item.addEventListener('mouseenter', () => {
      item.classList.add('hover');
    });
    item.addEventListener('mouseleave', () => {
      item.classList.remove('hover');
    });
  });
  
  // 为平台选择添加悬停动画
  const platformItems = document.querySelectorAll('.platform-items');
  platformItems.forEach(item => {
    item.addEventListener('mouseenter', () => {
      item.classList.add('hover');
    });
    item.addEventListener('mouseleave', () => {
      item.classList.remove('hover');
    });
  });
  await store.getProfile()
  await store.runningInstance(store.userInfo.licenseKey)
  // 显示算力不足弹窗
  if(store.computeBalance <= 5) showDialog.value = true;
});
</script>

<style lang="scss" scoped>

.bottom-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  align-items: flex-end;
}

.bottom-popup {
  width: 100%;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  animation: slideUp 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transform: translateZ(0); // 硬件加速
  will-change: transform, opacity;

  .popup-content {
    background: white;
    border-radius: 20px 20px 0 0;
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;

    .popup-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;

      h3 {
        font-size: 18px;
        color: #333;
      }

      .close-btn {
        font-size: 24px;
        background: none;
        border: none;
        color: #999;
      }
    }

    .popup-body {
      flex: 1;
      overflow-y: auto;
    }

    .popup-footer {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      margin-top: 20px;

      button {
        padding: 8px 16px;
        border-radius: 4px;
        font-size: 14px;
      }

      .cancel-btn {
        background: #f5f5f5;
        color: #333;
      }

      .confirm-btn {
        background: #006CFF;
        color: white;
      }
    }
  }
}

@keyframes slideUp {
  from {
    transform: translateY(100%) scale(0.98);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

// 新增动画
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

// 按钮悬停动画
.live-btn {
  transition: all 0.3s ease;
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
  &:active {
    transform: translateY(0);
  }
}
</style>
<style lang="scss" scoped>
/* 基础样式 */
.container {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background: #FFFFFF;
  overflow-x: hidden; /* 防止动画导致的水平滚动条 */
}

.top-bg {
  width: 100%;
  height: 445px;
  background: url('@/assets/images/index/top-bg.png') no-repeat;
  background-size: 100% 100%;
  transition: all 0.3s ease;
}

.top-block {
  z-index: 1;
  padding: 0 14px;
  padding-top: 40px;
  box-sizing: border-box;
  
  .logo-image {
    width: 94px;
    height: 22px;
    transition: transform 0.3s ease;
    
    &:hover {
      transform: scale(1.05);
    }
  }
  
  .slogan {
    font-family: 'Alibaba_PuHuiTi_Heavy', sans-serif;
    text-align: center;
    padding: 30px 0;
    font-weight: 800;
    font-size: 20px;
    color: #003A8A;
    position: relative;
    
    &::after {
      content: '';
      position: absolute;
      bottom: 20px;
      left: 50%;
      width: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent, #006CFF, transparent);
      transform: translateX(-50%);
      transition: width 0.5s ease;
    }
    
    &:hover::after {
      width: 120px;
    }
  }
  
  .grid-block {
    position: relative;
    min-height: 167px;
    
    .grid-title {
      background: url('@/assets/images/index/grid-title-bg.png') no-repeat;
      width: 294px;
      height: 47px;
      line-height: 47px;
      background-size: 100% 100%;
      position: absolute;
      left: 50%;
      top: -16px;
      transform: translate(-50%, 0);
      text-align: center;
      font-family: 'PingFang SC', sans-serif;
      font-weight: 500;
      font-size: 12px;
      color: #006CFF;
      z-index: 1;
      // transition: transform 0.3s ease;
      
      // &:hover {
      //   transform: translate(-50%, 0) scale(1.02);
      // }
    }
    
    .grid {
      display: flex;
      align-items: center;
      padding-top: 40px;
      background: url('@/assets/images/index/grid-bg.png') no-repeat;
      background-size: cover;
      width: 398px;
      height: 173px;
      position: relative;
      z-index: 2;
      box-sizing: border-box;
      
      &-item {
        flex: 1;
        text-align: center;
        transition: all 0.3s ease;
        
        &.hover {
          transform: translateY(-5px);
        }
        
        .icon {
          display: flex;
          justify-content: center;
          margin-bottom: 5px;
          
          img {
            width: 45px;
            height: 55px;
            transition: transform 0.3s ease;
          }
        }
        
        .slon1 {
          font-family: 'Alibaba_PuHuiTi_Heavy', sans-serif;
          font-weight: 800;
          font-size: 11.5px;
          color: #003A8A;
          transition: color 0.3s ease;
        }
        
        .slon2 {
          font-family: 'PingFang SC', sans-serif;
          font-weight: 400;
          font-size: 10.5px;
          color: #9AA0AF;
          transition: color 0.3s ease;
        }
        
        &:hover {
          .icon img {
            transform: scale(1.1);
            animation: pulse 1s infinite;
          }
          
          .slon1 {
            color: #006CFF;
          }
          
          .slon2 {
            color: #666;
          }
        }
      }
    }
  }
}

.platform {
  margin: 0 14px;
  margin-top: -100px;
  background: url('@/assets/images/index/platform-bg.png') no-repeat;
  background-size: 100% 100%;
  width: 398px;
  // height: 376px;
  border-radius: 17.5px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  
  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 60, 138, 0.15);
  }
  
  &-title {
    font-family: 'Alibaba_PuHuiTi_Heavy', sans-serif;
    font-weight: 800;
    font-size: 17.5px;
    color: #003A8A;
    text-align: center;
    padding-top: 17.5px;
    padding-bottom: 10.5px;
    position: relative;
    
    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      width: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent, #006CFF, transparent);
      transform: translateX(-50%);
      transition: width 0.5s ease;
    }
    
    &:hover::after {
      width: 150px;
    }
  }
  
  &-items {
    display: flex;
    justify-content: center;
    margin-bottom: 7px;
    transition: all 0.3s ease;
    cursor: pointer;
    
    &.hover {
      transform: translateY(-3px);
    }
    
    &.clicked {
      transform: scale(0.95);
    }
    
    img {
      width: 398px;
      height: 112px;
      border-radius: 10px;
      transition: all 0.3s ease;
    }
    
    &:active img {
      transform: scale(0.98);
    }
  }
}

.model-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 15px;
  animation: fadeIn 0.5s ease;
  
  .tishi-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 15px;
    animation: pulse 2s infinite;
    
    &.sl {
      background: url('@/assets/images/popup/suanliIcon.png') no-repeat center;
      background-size: contain;
    }
  }
  
  .title-v {
    font-family: 'Alibaba_PuHuiTi_Heavy', sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: #003A8A;
    margin-bottom: 14px;
    animation: fadeInDown 0.5s ease;
  }
  
  .content-v {
    font-family: 'PingFang SC', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #666;
    text-align: center;
    padding: 0 15px;
    margin-bottom: 20px;
    animation: fadeIn 0.5s ease 0.2s both;
  }
  
  .btn-block {
    display: flex;
    justify-content: space-between;
    width: 100%;
    animation: fadeInUp 0.5s ease 0.3s both;
    
    .btn-v {
      width: 45%;
      height: 40px;
      line-height: 40px;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 500;
      background: #f5f5f5;
      color: #666;
      border: none;
      transition: all 0.3s ease;
      cursor: pointer;
      
      &:hover {
        background: #e9e9e9;
        transform: translateY(-2px);
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
      }
      
      &:active {
        transform: translateY(0);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
      }
      
      &-active {
        background: linear-gradient(90deg, #006CFF, #0052CC);
        color: #fff;
        
        &:hover {
          background: linear-gradient(90deg, #0075FF, #0058DD);
          box-shadow: 0 3px 10px rgba(0, 108, 255, 0.3);
        }
      }
    }
  }
}

/* 添加页面过渡效果 */
.page-enter-active,
.page-leave-active {
  transition: opacity 0.5s ease;
}

.page-enter-from,
.page-leave-to {
  opacity: 0;
}
</style>